{% extends "Sales_base.html" %}
{% block title %}
商家入驻申请
{% endblock %}
{% block head %}
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Arial, sans-serif;
        }

        body {
            background: #f5f6fa;
        }

        .merchant-container {
            max-width: 1000px;
            margin: 60px auto;
            padding: 2rem;
        }

        .form-header {
            text-align: center;
            margin-bottom: 2rem;
        }

        .form-card {
            background: white;
            padding: 2rem;
            border-radius: 10px;
            box-shadow: 0 3px 10px rgba(0,0,0,0.1);
        }

        .form-section {
            margin-bottom: 2rem;
            padding: 1.5rem;
            border: 1px solid #eee;
            border-radius: 8px;
        }

        .form-group {
            margin-bottom: 1.5rem;
        }

        .form-label {
            display: block;
            margin-bottom: 0.5rem;
            font-weight: 500;
            color: #333;
        }

        .form-input {
            width: 100%;
            padding: 0.8rem;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-size: 1rem;
        }

        .form-input:focus {
            border-color: #2c7a47;
            outline: none;
            box-shadow: 0 0 5px rgba(44,122,71,0.2);
        }

        .file-upload {
            position: relative;
            border: 2px dashed #ddd;
            padding: 2rem;
            text-align: center;
            border-radius: 8px;
            cursor: pointer;
        }

        .file-upload:hover {
            border-color: #2c7a47;
        }

        #fileInput {
            display: none;
        }

        .upload-preview {
            margin-top: 1rem;
            display: none;
        }

        .agreement {
            margin: 1.5rem 0;
            padding: 1rem;
            background: #f8f9fa;
            border-radius: 6px;
            max-height: 200px;
            overflow-y: auto;
        }

        .submit-btn {
            background: #2c7a47;
            color: white;
            padding: 1rem 2rem;
            border: none;
            border-radius: 4px;
            font-size: 1rem;
            cursor: pointer;
            transition: opacity 0.3s;
            width: 100%;
        }

        .submit-btn:hover {
            opacity: 0.9;
        }

        .submit-btn.loading {
            opacity: 0.7;
            cursor: not-allowed;
        }

        .status-message {
            text-align: center;
            margin-top: 1rem;
            display: none;
        }

        @media (max-width: 768px) {
            .merchant-container {
                padding: 1rem;
                margin-top: 30px;
            }
        }
    </style>
{% endblock %}
{% block main %}
    <div class="merchant-container">
        <div class="form-header">
            <h1>商家入驻申请</h1>
            <p>请填写以下信息完成入驻申请</p>
        </div>

        <div class="form-card">
            <!-- 基本信息 -->
            <div class="form-section">
                <h2>基本信息</h2>
                <div class="form-group">
                    <label class="form-label">商户名称</label>
                    <input type="text" class="form-input" id="shopName" required>
                </div>
                <div class="form-group">
                    <label class="form-label">联系人姓名</label>
                    <input type="text" class="form-input" id="contactName" required>
                </div>
                <div class="form-group">
                    <label class="form-label">联系电话</label>
                    <input type="tel" class="form-input" id="phone" pattern="[0-9]{11}" required>
                </div>
                <div class="form-group">
                    <label class="form-label">电子邮箱</label>
                    <input type="email" class="form-input" id="email" required>
                </div>
            </div>

            <!-- 资质证明 -->
            <div class="form-section">
                <h2>资质证明</h2>
                <div class="form-group">
                    <label class="form-label">统一社会信用代码</label>
                    <input type="text" class="form-input" id="creditCode" pattern="[0-9A-Z]{18}" required>
                </div>
                <div class="form-group">
                    <label class="form-label">营业执照</label>
                    <div class="file-upload" onclick="document.getElementById('fileInput').click()">
                        <span>点击上传营业执照（PDF/图片）</span>
                        <input type="file" id="fileInput" accept=".pdf,.jpg,.png">
                        <div class="upload-preview" id="filePreview"></div>
                    </div>
                </div>
            </div>

            <!-- 协议条款 -->
            <div class="form-section">
                <h2>协议条款</h2>
                <div class="agreement">
                    <p>《平台商家入驻协议》</p>
                    <p>1. 商家保证所提供信息真实有效...</p>
                    <!-- 此处添加完整协议内容 -->
                </div>
                <div class="form-group">
                    <label>
                        <input type="checkbox" id="agree" required>
                        我已阅读并同意《平台商家入驻协议》
                    </label>
                </div>
            </div>

            <button class="submit-btn" onclick="submitForm(event)">提交申请</button>
            <div class="status-message" id="statusMessage"></div>
        </div>
    </div>

    <script>
        // 文件上传处理
        document.getElementById('fileInput').addEventListener('change', function(e) {
            const preview = document.getElementById('filePreview');
            const files = e.target.files;

            if(files.length > 0) {
                preview.style.display = 'block';
                preview.innerHTML = `
                    <p>已选择文件：${files[0].name}</p>
                    <p>文件类型：${files[0].type}</p>
                `;
            }
        });

        // 表单提交处理
        function submitForm(e) {
            e.preventDefault();
            const btn = document.querySelector('.submit-btn');
            const status = document.getElementById('statusMessage');

            // 验证表单
            if(!document.getElementById('agree').checked) {
                alert('请先阅读并同意协议条款');
                return;
            }

            // 模拟加载状态
            btn.classList.add('loading');
            btn.innerHTML = '提交中...';
            status.style.display = 'none';

            // 模拟API请求
            setTimeout(() => {
                btn.classList.remove('loading');
                btn.innerHTML = '提交申请';

                // 显示成功状态
                status.style.display = 'block';
                status.innerHTML = '提交成功！我们将在3个工作日内联系您';
                status.style.color = '#2c7a47';

                // 清空表单（实际使用时需要）
                document.querySelectorAll('.form-input').forEach(input => input.value = '');
                document.getElementById('filePreview').style.display = 'none';
                document.getElementById('fileInput').value = '';
            }, 1500);
        }

        // 输入实时验证
        document.querySelectorAll('.form-input').forEach(input => {
            input.addEventListener('input', function() {
                if(this.checkValidity()) {
                    this.style.borderColor = '#2c7a47';
                } else {
                    this.style.borderColor = '#e74c3c';
                }
            });
        });
    </script>
{% endblock %}